<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 智能竞赛信息平台</title>
    <!-- 网站图标 -->
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <link rel="shortcut icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
    <!-- 使用国内CDN -->
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/iconify/1.0.7/iconify-icon.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: #F8FAFC;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .register-container {
            min-height: 100vh;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 16px;
            position: relative;
            overflow: hidden;
        }

        .register-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            pointer-events: none;
        }

        .register-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
            padding: 40px;
            width: 100%;
            max-width: 460px;
            position: relative;
            z-index: 1;
            border: 1px solid rgba(255, 255, 255, 0.2);
            animation: fadeInUp 0.6s ease-out;
            margin: auto;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .register-header {
            text-align: center;
            margin-bottom: 32px;
        }

        .register-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 20px;
        }

        .register-title {
            font-size: 28px;
            font-weight: 700;
            background: linear-gradient(135deg, #2A5CAA, #1e4788);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin: 0 0 8px 0;
        }

        .register-subtitle {
            font-size: 14px;
            color: #6B7280;
            margin: 0;
        }

        .register-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
            position: relative;
        }

        .form-group.full-width {
            grid-column: 1 / -1;
        }

        .form-label {
            font-size: 14px;
            font-weight: 600;
            color: #374151;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .form-input {
            padding: 12px 14px;
            border: 2px solid #E5E7EB;
            border-radius: 12px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.8);
        }

        .form-input:focus {
            outline: none;
            border-color: #2A5CAA;
            box-shadow: 0 0 0 4px rgba(42, 92, 170, 0.1);
            background: white;
        }

        .form-input:hover {
            border-color: #9CA3AF;
        }

        .form-select {
            padding: 12px 14px;
            border: 2px solid #E5E7EB;
            border-radius: 12px;
            font-size: 14px;
            background: rgba(255, 255, 255, 0.8);
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
        }

        .form-select:focus {
            outline: none;
            border-color: #2A5CAA;
            box-shadow: 0 0 0 4px rgba(42, 92, 170, 0.1);
            background: white;
        }

        .form-select:hover {
            border-color: #9CA3AF;
        }

        /* 修复下拉框超出卡片的问题 */
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
            position: relative;
            z-index: 1;
        }

        .form-group select {
            position: relative;
            z-index: 1;
        }

        /* 确保下拉选项在卡片内显示 */
        .register-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
            padding: 40px;
            width: 100%;
            max-width: 460px;
            position: relative;
            z-index: 1;
            border: 1px solid rgba(255, 255, 255, 0.2);
            animation: fadeInUp 0.6s ease-out;
            margin: auto;
            overflow: visible;
        }

        /* 下拉框容器样式优化 */
        .register-container {
            min-height: 100vh;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 16px;
            position: relative;
            overflow: visible;
        }

        /* 确保下拉选项显示在正确位置 */
        .form-select option {
            background: white;
            color: #374151;
            padding: 8px 12px;
        }

        /* 防止下拉框被裁剪 */
        .form-group:has(select:focus) {
            z-index: 10;
        }

        /* iOS Safari 特殊处理 */
        @supports (-webkit-touch-callout: none) {
            .form-select {
                -webkit-appearance: none;
                background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
                background-repeat: no-repeat;
                background-position: right 12px center;
                background-size: 16px;
                padding-right: 40px;
            }
        }

        .register-btn {
            background: linear-gradient(135deg, #2A5CAA, #1e4788);
            color: white;
            border: none;
            padding: 14px 20px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 8px;
            position: relative;
            overflow: hidden;
        }

        .register-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .register-btn:hover::before {
            left: 100%;
        }

        .register-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(42, 92, 170, 0.3);
        }

        .register-btn:active {
            transform: translateY(0);
        }

        .register-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .error-message {
            background: linear-gradient(135deg, #FEE2E2, #FECACA);
            color: #DC2626;
            padding: 14px 16px;
            border-radius: 12px;
            font-size: 14px;
            margin-bottom: 16px;
            display: none;
            border: 1px solid #FCA5A5;
            box-shadow: 0 2px 8px rgba(220, 38, 38, 0.1);
        }

        .success-message {
            background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
            color: #065F46;
            padding: 14px 16px;
            border-radius: 12px;
            font-size: 14px;
            margin-bottom: 16px;
            display: none;
            border: 1px solid #6EE7B7;
            box-shadow: 0 2px 8px rgba(5, 95, 70, 0.1);
        }

        .login-link {
            text-align: center;
            margin-top: 24px;
            font-size: 14px;
            color: #6B7280;
        }

        .login-link a {
            color: #2A5CAA;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.2s;
        }

        .login-link a:hover {
            color: #1e4788;
            text-decoration: underline;
        }

        .password-requirements {
            font-size: 12px;
            color: #6B7280;
            margin-top: 4px;
        }

        .requirement {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-bottom: 2px;
        }

        .requirement.valid {
            color: #059669;
        }

        .requirement.invalid {
            color: #DC2626;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .form-row {
                grid-template-columns: 1fr;
            }
            
            .register-card {
                padding: 28px 20px;
                margin: 12px;
                max-width: calc(100% - 24px);
                overflow: visible;
            }
            
            .register-title {
                font-size: 24px;
            }

            /* 移动端下拉框优化 */
            .form-select {
                font-size: 16px; /* 防止iOS缩放 */
                padding: 14px 16px;
            }

            .form-group {
                z-index: 2;
            }
        }

        /* 电脑端优化 */
        @media (min-width: 768px) {
            .register-card {
                max-width: 520px;
                padding: 48px;
                overflow: visible;
            }
            
            .register-title {
                font-size: 32px;
            }
            
            .register-subtitle {
                font-size: 16px;
            }
            
            .form-input,
            .form-select {
                padding: 14px 16px;
                font-size: 15px;
            }
            
            .register-btn {
                padding: 16px 24px;
                font-size: 16px;
            }

            /* 桌面端下拉框优化 */
            .form-group {
                z-index: 2;
            }
        }

        /* 大屏幕优化 */
        @media (min-width: 1200px) {
            .register-card {
                max-width: 580px;
                padding: 56px;
            }
            
            .register-title {
                font-size: 36px;
            }
        }
    </style>
</head>
<body>
    <div class="register-container">
        <div class="register-card">
            <div class="register-header">
                <div class="register-logo">
                    <iconify-icon icon="clarity:computer-solid" style="color: #2A5CAA;" width="40"></iconify-icon>
                    <span style="font-size: 28px; font-weight: 700; color: #2A5CAA;">竞赛智汇</span>
                </div>
                <h1 class="register-title">创建账户</h1>
                <p class="register-subtitle">加入我们，开启竞赛之旅</p>
            </div>

            <div class="error-message" id="errorMessage"></div>
            <div class="success-message" id="successMessage"></div>

            <form class="register-form" id="registerForm">
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="studentId">
                            <iconify-icon icon="material-symbols:school" width="16"></iconify-icon>
                            学号 *
                        </label>
                        <input type="text" id="studentId" name="student_id" class="form-input" 
                               placeholder="请输入学号" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="name">
                            <iconify-icon icon="material-symbols:person" width="16"></iconify-icon>
                            姓名 *
                        </label>
                        <input type="text" id="name" name="name" class="form-input" 
                               placeholder="请输入姓名" required>
                    </div>
                </div>

                <div class="form-group full-width">
                    <label class="form-label" for="password">
                        <iconify-icon icon="material-symbols:lock" width="16"></iconify-icon>
                        密码 *
                    </label>
                    <input type="password" id="password" name="password" class="form-input" 
                           placeholder="请输入密码" required>
                    <div class="password-requirements" id="passwordRequirements">
                        <div class="requirement invalid" id="lengthReq">
                            <iconify-icon icon="material-symbols:check-circle" width="12"></iconify-icon>
                            密码长度至少6位
                        </div>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="college">
                            <iconify-icon icon="material-symbols:school" width="16"></iconify-icon>
                            学院
                        </label>
                        <select id="college" name="college" class="form-select"></select>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="major">
                            <iconify-icon icon="material-symbols:work" width="16"></iconify-icon>
                            专业
                        </label>
                        <select id="major" name="major" class="form-select"></select>
                    </div>
                </div>

                <div class="form-group full-width">
                    <label class="form-label" for="phone">
                        <iconify-icon icon="material-symbols:phone" width="16"></iconify-icon>
                        手机号
                    </label>
                    <input type="tel" id="phone" name="phone" class="form-input" 
                           placeholder="请输入手机号（可选）">
                </div>

                <button type="submit" class="register-btn" id="registerBtn">
                    <span id="registerText">注册</span>
                    <span id="loadingText" style="display: none;">注册中...</span>
                </button>
            </form>

            <div class="login-link">
                已有账户？<a href="/login">立即登录</a>
            </div>
        </div>
    </div>

    <script>
        // 从后端注入的college_info渲染下拉框
        const COLLEGE_INFO = JSON.parse('{{ college_info|tojson|safe }}');
        const collegeSelect = document.getElementById('college');
        const majorSelect = document.getElementById('major');

        function initCollegeOptions() {
            collegeSelect.innerHTML = '';
            const colleges = Object.keys(COLLEGE_INFO || {});
            for (const col of colleges) {
                const opt = document.createElement('option');
                opt.value = col;
                opt.textContent = col;
                collegeSelect.appendChild(opt);
            }
            // 若无数据，提供一个“其他”选项
            if (!colleges.length) {
                const opt = document.createElement('option');
                opt.value = '其他';
                opt.textContent = '其他';
                collegeSelect.appendChild(opt);
            }
        }

        function renderMajors(college) {
            majorSelect.innerHTML = '';
            const majors = (COLLEGE_INFO && COLLEGE_INFO[college]) ? COLLEGE_INFO[college] : [];
            if (majors.length) {
                for (const m of majors) {
                    const opt = document.createElement('option');
                    opt.value = m;
                    opt.textContent = m;
                    majorSelect.appendChild(opt);
                }
            } else {
                const opt = document.createElement('option');
                opt.value = '';
                opt.textContent = '请选择学院后显示专业';
                majorSelect.appendChild(opt);
            }
        }

        initCollegeOptions();
        renderMajors(collegeSelect.value);
        collegeSelect.addEventListener('change', () => renderMajors(collegeSelect.value));

        // 修复移动端下拉框显示问题
        function fixSelectDisplay() {
            const selects = document.querySelectorAll('.form-select');
            selects.forEach(select => {
                select.addEventListener('focus', function() {
                    // 确保下拉框在视口内
                    const rect = this.getBoundingClientRect();
                    const viewportHeight = window.innerHeight;
                    
                    if (rect.bottom + 200 > viewportHeight) {
                        // 如果下拉框会超出视口底部，滚动到合适位置
                        window.scrollTo({
                            top: window.scrollY + (rect.bottom + 200 - viewportHeight),
                            behavior: 'smooth'
                        });
                    }
                });
            });
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            fixSelectDisplay();
        });

        document.getElementById('registerForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const studentId = document.getElementById('studentId').value.trim();
            const name = document.getElementById('name').value.trim();
            const password = document.getElementById('password').value.trim();
            const college = document.getElementById('college').value;
            const major = document.getElementById('major').value.trim();
            const phone = document.getElementById('phone').value.trim();
            
            const registerBtn = document.getElementById('registerBtn');
            const registerText = document.getElementById('registerText');
            const loadingText = document.getElementById('loadingText');
            
            // 验证表单
            if (!studentId || !name || !password) {
                showError('请填写完整的注册信息');
                return;
            }
            
            if (studentId.length < 8) {
                showError('学号格式不正确');
                return;
            }
            
            if (password.length < 6) {
                showError('密码长度至少6位');
                return;
            }
            
            // 显示加载状态
            registerBtn.disabled = true;
            registerText.style.display = 'none';
            loadingText.style.display = 'inline';
            hideMessages();
            
            // 发送注册请求
            fetch('/api/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    student_id: studentId,
                    name: name,
                    password: password,
                    college: college,
                    major: major,
                    phone: phone || null
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showSuccess(data.message + '，正在跳转到登录页面...');
                    setTimeout(() => {
                        window.location.href = '/login';
                    }, 2000);
                } else {
                    showError(data.message || '注册失败，请重试');
                }
            })
            .catch(error => {
                console.error('注册错误:', error);
                showError('网络错误，请稍后重试');
            })
            .finally(() => {
                // 恢复按钮状态
                registerBtn.disabled = false;
                registerText.style.display = 'inline';
                loadingText.style.display = 'none';
            });
        });
        
        // 密码验证
        document.getElementById('password').addEventListener('input', function() {
            const password = this.value;
            const lengthReq = document.getElementById('lengthReq');
            
            if (password.length >= 6) {
                lengthReq.classList.remove('invalid');
                lengthReq.classList.add('valid');
            } else {
                lengthReq.classList.remove('valid');
                lengthReq.classList.add('invalid');
            }
        });
        
        function showError(message) {
            const errorMessage = document.getElementById('errorMessage');
            errorMessage.textContent = message;
            errorMessage.style.display = 'block';
            document.getElementById('successMessage').style.display = 'none';
        }
        
        function showSuccess(message) {
            const successMessage = document.getElementById('successMessage');
            successMessage.textContent = message;
            successMessage.style.display = 'block';
            document.getElementById('errorMessage').style.display = 'none';
        }
        
        function hideMessages() {
            document.getElementById('errorMessage').style.display = 'none';
            document.getElementById('successMessage').style.display = 'none';
        }
    </script>
</body>
</html>
